<!--
 * @Descripttion: 
 * @version: 
 * @Author: 高月飞
 * @Date: 2023-11-26 14:50:52
 * @LastEditors: 高月飞
 * @LastEditTime: 2023-11-26 14:53:42
-->
<template>
  <div>
   <h2>销售排行（万元）</h2>
    <div>
    <el-select v-model="value" class="m-2" placeholder="请选择部门" size="large">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"
        @click="btn(item.value)" />
    </el-select>
  </div>
  
   
 </div>
 <div >
  <SalesRanking :data="Data"></SalesRanking>
  <Atable :data="Data"/>
 </div>
</template>
<script setup lang = "ts">
import SalesRanking from './echarts/SalesRanking.vue';
import Atable from './echarts/Atable.vue';
import {ref} from 'vue';
interface IProps{
  data:any
}
const props = defineProps<IProps>();

const value = ref('')
const Data = ref(props.data)
const options = [
  {
    value: '1',
    label: '市场一部',
  },
  {
    value: '2',
    label: '市场二部',
  }
]
const btn = (value: any) => {
  if (value == '1') {
    
    return Data.value = props.data.A
    
  } else if (value == '2') {
    console.log(props.data.B);
    return Data.value = props.data.B

  } else {
    return Data.value = props.data.A
  }
}



</script>
<style lang= "scss" scoped>
  select{width: 200px;height: 50px;border: 1px solid #ccc;}
</style>